<template>
  <div class="imgs" ref="imgsRef">
    <img :src="getFile(att.id)" v-for="(att, index) in attachments" :key="index" @click="toPreview(index)"
      :style="`width:${w}px;margin-bottom:${b}px`" :alt="att.name"/>
  </div>
</template>

<script setup>
import { ref, shallowRef, computed } from 'vue'
import 'viewerjs/dist/viewer.css';
import Viewer from 'viewerjs';
import { getFile } from '@/api/att'

const props = defineProps(['attachments', 'width'])

const imgsRef = ref()
const viewer = shallowRef()

const w = computed(() => {
  let rs = 100;
  if (props.width) {
    rs = props.width
  }
  return rs
})
const b = computed(() => {
  let rs = 8;
  if (props.attachments.length == 0) {
    rs = 0
  }
  return rs
})

const toPreview = (index) => {
  if (!viewer.value) {
    viewer.value = new Viewer(imgsRef.value)
  }
  viewer.value.view(index)
}

</script>

<style lang="less" scoped>
.imgs {
  img {
    cursor: pointer;
    width: 100px;
    margin-bottom: 8px;
    margin-right: 8px;
  }
}
</style>